<template>
  <div>
    <panle :title="tipMessage" content=""></panle>
    <el-row :span="24" class="pt20">
      <el-form :model="form" ref="form" :rules="rules" label-width="150px" class="demo-ruleForm">
        <el-form-item label="视频播放百分比:" prop="video_play_percent" class="bold-label">
          <el-col :span="1">
            <el-input-number v-model="form.video_play_percent" :min="1" :max="100" label="请输入数值"></el-input-number>
<!--            <el-input v-model.number="form.video_play_percent"></el-input>-->
          </el-col>
          <el-col :span="1">&nbsp;%</el-col>

            <el-button type="primary" style="margin-left: 100px;"  @click="submitForm('video_play_percent',form.video_play_percent)">保存</el-button>
        </el-form-item>

<!--        <el-form-item>-->
<!--          <el-button @click="resetForm('form')">取消</el-button>-->
<!--          <el-button type="primary" @click="submitForm('form')">确定</el-button>-->
<!--        </el-form-item>-->
      </el-form>
    </el-row>

  </div>
</template>

<script>
import { getConfig, editConfig } from '@/api/kanke/textbook/settings'
export default {
  name: 'appconfig',
  components: {
  },
  data() {
    return {
      loading: false,
      tipMessage:'app通用配置',
      range: {
        min: 1,
        max: 100
      },
      form: {
        video_play_percent: 1,
      },

      rules: {
        video_play_percent: [
          { required: true, message: '视频播放百分比不能为空' },
          { type: 'number', message: '视频播放百分比必须为数字值' }
        ]
      }
    }
  },
  watch: {
    'range.min': function(newVal, oldVal) {
      if (newVal > this.range.max) {
        this.range.max = newVal;
      }
    },
    'range.max': function(newVal, oldVal) {
      if (newVal < this.range.min) {
        this.range.min = newVal;
      }
    }
  },
  computed: {
  },
  created() {
    this.init()
  },
  mounted() {
  },
  methods: {
    async init() {

        this.loading = true;
        const res = await getConfig()
        this.loading = false;
        if (res.code == 200) {
          console.log('getConfig',res);
          if(res.data.length > 0){
            for(let i=0;i<res.data.length;i++){
              if(res.data[i].config_name == 'video_play_percent'){
                this.form.video_play_percent = res.data[i].config_value;
              }
            }
          }
          //this.form.video_play_percent = res.data.video_play_percent
        }

    },

    submitForm(name,val) {
      console.log('name-val',name,val);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          editConfig({config_name:name,config_value:val}).then((res) => {
            // console.log(res)
            if (res.code == 200) {
              this.msgSuccess(res.msg);
              //this.$router.go(-1)
                this.init();
            } else {
              this.msgError(res.msg);
            }
          })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      // this.$refs[formName].resetFields();
      this.$router.go(-1)
    }
  }
}


</script>

<style lang="scss" scoped>
</style>